
<template>
    <div>
        <h2>{{info.title}}</h2>
        <p>{{info.des}}</p>
        <h3>基本用法</h3>
        <div class="base" :style="{ width: editorwidth + 'px'}">
            <div>
                <slot></slot>
            </div>
            <div :style="setWidthHeight">
                <div class="code" ref="code"></div>
            </div>
            <div>
                <span></span>
            </div>
        </div>
        <div class="attributes">
            <h3 v-show="attributes.length>0">Attributes</h3>
            <table cellspacing="0" cellpadding="0">
                <tr v-show="attributes.length>0">
                    <td>参数</td>
                    <td>说明</td>
                    <td>类型</td>
                    <td>可选值</td>
                    <td>默认值</td>
                </tr>
                <tr v-for="item in attributes" :key="item.param">
                    <td>{{item.param}}</td>
                    <td>{{item.des}}</td>
                    <td>{{item.type}}</td>
                    <td>{{item.selectvalue}}</td>
                    <td>{{item.defaultvalue}}</td>
                </tr>
            </table>
        </div>
        <div class="attributes">
            <h3 v-show="extra.data.length>0">{{extra.title}}</h3>
            <table cellspacing="0" cellpadding="0">
                <tr v-show="extra.data.length>0">
                    <td>参数</td>
                    <td>说明</td>
                    <td>类型</td>
                    <td>可选值</td>
                    <td>默认值</td>
                </tr>
                <tr v-for="item in extra.data" :key="item.param">
                    <td>{{item.param}}</td>
                    <td>{{item.des}}</td>
                    <td>{{item.type}}</td>
                    <td>{{item.selectvalue}}</td>
                    <td>{{item.defaultvalue}}</td>
                </tr>
            </table>
        </div>
        <div class="events">
            <h3 v-show="events.length>0">Events</h3>
            <table cellspacing="0" cellpadding="0">
                <tr v-show="events.length>0">
                    <td>事件名称</td>
                    <td>说明</td>
                    <td>回调参数</td>
                </tr>
                <tr v-for="item in events" :key="item.eventname">
                    <td>{{item.eventname}}</td>
                    <td>{{item.des}}</td>
                    <td>{{item.param}}</td>
                </tr>
            </table>
        </div>
    </div>
</template>


<script>
/* eslint-disable*/

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
import 'monaco-editor/esm/vs/basic-languages/html/html.contribution'
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js'
export default {
	components: {},
	data() {
		return {
			setWidthHeight: { width: this.editorwidth + 'px', height: this.editorheight + 'px' }
		}
	},
	props: {
		info: {
			type: Object,
			default() {
				return {
					title: '组件',
					des: '',
					editor: ``
				}
			}
		},
		attributes: {
			type: Array,
			default() {
				return []
			}
		},
		extra: {
			type: Object,
			default() {
				return {
					title: '',
					data: []
				}
			}
		},
		events: {
			type: Array,
			default() {
				return []
			}
		},
		editorwidth: {
			type: Number,
			default() {
				return 800
			}
		},
		editorheight: {
			type: Number,
			default() {
				return 400
			}
		}
	},
	mounted() {
		this.monaco = monaco.editor.create(this.$refs.code, {
			value: this.info.editor,
			language: 'javascript',
			// theme: 'vs-dark', //颜色
			// 自适应layout
			automaticLayout: false,
			// 右侧预览
			minimap: {
				enabled: false
			},
			wordWrap: 'on'
		})
		console.log(this.monaco)
	}
}
</script>

 <style scoped>
h2 {
	font-weight: 400;
}
.base {
	border: 1px solid #dcdfe6;
}
.base > div:nth-child(1) {
	margin: 20px 10px;
}
.base > div:nth-child(2) {
	border-top: 1px solid #dcdfe6;
	border-right: 1px solid #dcdfe6;
}
.code {
	width: 100%;
	height: 100%;
}
table {
	width: 800px;
}
table > tr > td {
	font-size: 14px;
	color: #68717c;
	height: 40px;
	text-align: center;
	border-bottom: 1px solid #dcdfe6;
}
h3 {
	margin-top: 30px;
	font-weight: 450;
}
p {
	font-size: 15px;
	color: #68717c;
}
</style>
